import { useEffect, useMemo } from "react"
import { useSelector, useDispatch } from 'react-redux'
import { Divider, Space, Tag } from "antd"
import PropTypes from "prop-types"
import { queryUsersAction } from '../store/actions/userActions'
import { queryUserGroupsAction } from '../store/actions/userActions'
import UserPicker from "./UserPicker"
import GroupPicker from "./GroupPicker"

/**
 * 可增删标签列表组件
 */
const EditableTagList = ({
  value,
  onChange,
  title,
  color = 'blue',
  renderHeader,
  disabled,
  map
}) => {

  const handleAdd = (newIds) => {
    onChange(newIds.concat(value))
  }

  const handleRemove = (id) => {
    onChange(value.filter(el => el !== id))
  }

  const renderTag = (el) => {
    if (map) {
      return <Tag
        color={!!map[el] ? color : ''}
        closable={disabled}
        key={el}
        onClose={() => {
          handleRemove(el)
        }}
      >{map[el] || el}</Tag>
    } else {
      return <Tag
        color={color}
        closable={disabled}
        key={el}
        onClose={() => {
          handleRemove(el)
        }}
      >{el}</Tag>
    }
  }

  return <>
    <Divider>app定义的可访问{title}</Divider>
    <div>
      {
        disabled && renderHeader(handleAdd, value)
      }
      <div style={{ marginTop: 10 }}>
        {
          value.length > 0 ?
            <Space wrap>
              {
                value.map(renderTag)
              }
            </Space>
            :
            <span style={{ color: '#999' }}>暂无绑定{title}</span>
        }
      </div>
    </div>
  </>
}
EditableTagList.propTypes = {
  value: PropTypes.any,
  onChange: PropTypes.func,
  title: PropTypes.string,
  color: PropTypes.string,
  renderHeader: PropTypes.func,
  disabled: PropTypes.bool,
  map: PropTypes.object
}

/**
 * 用户可增删标签列表组件
 */
const UserEditableTagList = ({
  value,
  onChange,
  disabled
}) => {

  const dispatch = useDispatch()
  const users = useSelector(state => state.users)

  useEffect(() => {
    if (users.length === 0) {
      dispatch(queryUsersAction())
    }
  }, [])

  const userMap = useMemo(() => {
    const result = {}
    users.forEach(el => {
      result[el.id] = el.fullName
    })
    return result
  }, [users])

  return <EditableTagList
    map={userMap}
    title="用户"
    value={value}
    onChange={onChange}
    disabled={disabled}
    renderHeader={(handleAdd, value) => (
      <UserPicker
        onPick={(userIds) => {
          handleAdd(userIds)
        }}
        disabledKeys={value}
      ></UserPicker>
    )}
  ></EditableTagList>
}

UserEditableTagList.propTypes = {
  value: PropTypes.any,
  onChange: PropTypes.func,
  disabled: PropTypes.bool
}

/**
 * 用户组可增删标签列表组件
 */
const GroupEditableTagList = ({
  value,
  onChange,
  disabled
}) => {
  const dispatch = useDispatch()
  const userGroups = useSelector(state => state.userGroups)

  useEffect(() => {
    if (userGroups.length === 0) {
      dispatch(queryUserGroupsAction())
    }
  }, [])

  const groupMap = useMemo(() => {
    const result = {}
    userGroups.forEach(el => {
      result[el.id] = el.name
    })
    return result
  }, [userGroups])

  return <EditableTagList
    title="用户组"
    value={value}
    onChange={onChange}
    disabled={disabled}
    color="green"
    map={groupMap}
    renderHeader={(handleAdd, value) => (
      <GroupPicker
        onPick={handleAdd}
        disabledKeys={value}
      ></GroupPicker>
    )}
  ></EditableTagList>
}

GroupEditableTagList.propTypes = {
  value: PropTypes.any,
  onChange: PropTypes.func,
  disabled: PropTypes.bool
}

export {
  UserEditableTagList,
  GroupEditableTagList
}

export default EditableTagList